<template>
  <el-dialog :model-value="true" :close-on-click-modal="true" :before-close="handleClose" title="适用职级范围选择"
    width="800px">
    <div class="select-box">
      <div class="tags-box" :style="{ height: tagHeight }">
        <div class="tags-main">
          <el-tag v-for="(item, index) in selectList" :key="index" class="tags" closable
            @close="removeTab(index, item)">
            {{ item.rankName }}
          </el-tag>
        </div>
      </div>
    </div>
    <div class="work-box" style="width: 100%">
      <div v-if="workList.length > 0">
        <div v-for="(item, index) in workList" :key="index" class="work-list">
          <p>{{ item.rankName }}</p>
          <div class="check-box" @click="selectWork(index, item)">
            <img :src="selectIcon" alt v-if="item.isSelect" />
            <img :src="noSelectIcon" alt v-else />
          </div>
        </div>
      </div>
      <div class="no-data" v-else>暂无数据</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue";
import api from "@/api/index";
import selectIcon from "@/assets/images/check_select.png";
import noSelectIcon from "@/assets/images/check_no_select.png";
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  emits: ["handleClose", "on-update"],
  props: {
    jobData: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      loading: false,
      workList: [],
      selectIcon,
      noSelectIcon,
      selectList: [],
    });

    const methods = {
      handleClose() {
        emit("handleClose");
      },
      handleSubmit() {
        if (state.selectList.length == 0) ElMessage.error("请选择");
        let jobLevelIds = [],
          jobText = "",
          rankList = [];
        state.selectList.forEach((item) => {
          console.log(item.rankCode,'itmexxx')
          jobLevelIds.push(item.rankCode);
          jobText += item.rankName + "、";
          rankList.push({ rankCode: item.rankCode, rankName: item.rankName });
        });
        let obj = {
          jobLevelIds,
          rankList,
          targetRankText:jobText
        };
        emit("on-update", [obj, jobText]);
      },
      removeTab(index, row) {
        state.selectList.splice(index, 1);
        let needIndex = -1;
        for (let k in state.workList) {
          if (state.workList[k].rankCode == row.rankCode) {
            needIndex = k;
          }
        }
        console.log(needIndex,'neexx',state.workList)
        state.workList[needIndex]["isSelect"] = false;
      },
      // 选择职级
      selectWork(index, item) {
        state.workList[index]["isSelect"] = !state.workList[index]["isSelect"];
        let list = state.workList.filter((item) => item.isSelect);
        state.selectList = list;
      },
      getJobLevelList() {
        return new Promise((resolve) => {
          api.publicApi.findAllJobLevel().then(res => {
            state.workList = res
            resolve(res)
          })
        })

      }
    };
    onMounted(() => {
      if (props.jobData != "") {
        // 编辑
        try {
          let obj = typeof props.jobData == "string" ? JSON.parse(props.jobData) : props.jobData;
          state.selectList = obj.rankList
          console.log(state.selectList,' state.selectList')
          methods.getJobLevelList().then(rex => {
            obj.jobLevelIds.forEach((item, index) => {
              state.workList.forEach((itemTwo) => {
                if (item == itemTwo.rankCode) itemTwo.isSelect = true;
              });
            });
          })
        } catch (error) { }
      } else {
        methods.getJobLevelList()
      }
    });
    return {
      ...toRefs(state),
      ...methods,
    };
  },
};
</script>
<style scoped lang="scss">
.work-box {
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;

  .work-list {
    margin: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f5f5ff;
    padding: 0 10px;

    &:hover {
      background: #dcdfe6;
    }

    p {
      font-size: 14px;
      flex: 1;
      margin: 5px 0;
    }

    .check-box {
      img {
        width: 15px;
        height: 15px;
        margin-left: 15px;
        cursor: pointer;
      }
    }
  }
}

.no-data {
  color: #666;
  font-size: 14px;
  margin-top: 40px;
  text-align: center;
}

.tags {
  margin-right: 5px;
}

.select-box {
  margin-bottom: 15px;
}
</style>
